<template>
  <div v-if="info" class="hl-order-detail">
    <sjht-card title="订单信息">
      <sjht-detail-item title="订单编号">{{ info.orderNo }}</sjht-detail-item>
      <sjht-detail-item title="下单商家">{{ info.store.name }}</sjht-detail-item>
      <sjht-detail-item title="	订单金额"
        ><span class="hl-price">{{ info.price }}</span></sjht-detail-item
      >
      <sjht-detail-item title="	折扣费用"
        ><span class="hl-price">{{ info.discount }}</span></sjht-detail-item
      >
      <sjht-detail-item title="	订单总价"
        ><span class="hl-price">{{ info.totalPrice }}</span></sjht-detail-item
      >
      <sjht-detail-item title="支付方式">{{ info.payMode }}</sjht-detail-item>
      <sjht-detail-item title="支付时间">{{ info.payTime }}</sjht-detail-item>
      <sjht-detail-item title="下单时间">{{ info.createTime }}</sjht-detail-item>
      <sjht-detail-item title="完成时间">{{ info.finishTime }}</sjht-detail-item>
    </sjht-card>

    <sjht-card title="选购商品">
      <!-- <template #extra>
        <span>{{ info.productList.length }}</span>
      </template> -->
      <template v-for="m in info.productList">
        <sjht-detail-item :key="m.id" :title="m.name"
          ><span class="hl-price" style="margin-right:4px">{{ m.price }}</span>x {{ m.number }}</sjht-detail-item
        >
      </template>
    </sjht-card>
  </div>
</template>
<script>
import Card from '../components/card'
import DetailItem from '../components/detail-item'
import { GetShopOrderById } from '../api/user'
export default {
  components: {
    [Card.name]: Card,
    [DetailItem.name]: DetailItem
  },
  data() {
    return {
      info: null
    }
  },
  mounted() {
    GetShopOrderById(this.$route.query.id)
      .then(res => {
        this.info = res
      })
      .catch(err => {
        this.$toast(err)
      })
  }
}
</script>

<style lang="less" scoped>
.hl-order-detail {
  padding: 8px 16px;
  /deep/.sjht-card:nth-of-type(n + 2) {
    margin-top: 8px;
  }
}
</style>
